<!--
 * @Author: dazy916 dazy916@126.com
 * @Date: 2025-09-19 19:04:15
 * @LastEditors: dazy916 dazy916@126.com
 * @LastEditTime: 2025-09-21 14:12:06
 * @FilePath: \H5\src\pages\teacher\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import BottomNav from '@/components/bottomNav.vue'
import Header from '@/components/topNav.vue'
import MainContent from "@/components/mainContent.vue";
// 获取实例和路由
const { proxy: { $http } } = getCurrentInstance()
const route = useRoute()
const router = useRouter()


// 页面加载时获取数据
onMounted(async () => {
})
//开始教学按钮
const startTeaching = () => {
  router.push({ path: 'teachOne' })
}
</script>

<template>
  <main class="main-content showIndex d-flex align-items-end borderbox">
    <BottomNav />
  </main>
</template>

<style scoped lang='scss'>
.main-content {
  padding: 0!important;
  height: 100vh;
  background-image: url('@/assets/img/student-index-bg.png');
  background-repeat: no-repeat;
  background-size: cover;

  &.showIndex {
    background-image: url('@/assets/img/student-index-bg1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position:center;
  }
}

// 图片外层容器：控制显示区域，避免图片溢出
.img-wrapper {
  width: 100%;
  height: auto; // 高度随图片比例自适应
  max-height: 50vh; // 限制最大高度，避免小屏下图片过高
  overflow: hidden; // 防止极端情况下图片溢出（可选，根据需求决定）
  border-radius: 8px; // 可选：添加圆角，优化视觉
}

// 核心：图片自适应样式
.centered-image {
  width: 100%; // 宽度占满容器
  height: 100%; // 高度占满容器
  object-fit: contain; // 关键属性：保持图片完整比例，不裁剪，空白处留空
  object-position: center; // 图片在容器中居中显示
}

// 按钮样式：确保在不同屏幕下位置稳定
.start-teaching-btn {
  padding: 12px 32px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  background-color: #e63946;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #c41c2a;
  }
}

// 头部样式（原有样式保留，若未使用可根据需求删除）
.page-header {
  display: flex;
  align-items: center;

  .school-info {
    text-align: center;
    flex: 1;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;

      h1 {
        padding: 20px;
        font-size: 25px;
        font-weight: 600;
        color: #333;
        margin: 0;
      }
    }

    .border {
      width: 80%;
      height: 1px;
      background-color: #000000;
      margin: 0 auto;
    }
  }
}

// 响应式调整：针对小屏（375px以下）优化
@media (max-width: 375px) {
  .main-content {
    padding: 16px;
  }

  .book-card {
    max-width: 100%; // 小屏下占满宽度
    gap: 16px; // 减小图片与按钮间距
  }

  .img-wrapper {
    max-height: 40vh; // 小屏下降低图片最大高度，避免遮挡按钮
  }

  .start-teaching-btn {
    font-size: 16px;
    padding: 10px 24px; // 小屏下缩小按钮尺寸
  }

  .page-header .school-info .header-content h1 {
    font-size: 20px; // 小屏下缩小标题字号
    padding: 12px;
  }
}

// 新增：针对大屏（1024px以上）优化
@media (min-width: 1024px) {
  .book-card {
    max-width: 700px; // 大屏下适当增大图片容器最大宽度
  }

  .img-wrapper {
    max-height: 60vh; // 大屏下提高图片最大高度，提升视觉效果
  }

  .start-teaching-btn {
    font-size: 20px;
    padding: 14px 36px; // 大屏下放大按钮，提升交互体验
  }
}
</style>
